<template>
  <div class="CityName">
    <div class="block">
      <el-cascader size="mini" v-model="value" :options="options" @change="handleChange"></el-cascader>
    </div>
    <div class="block">
      <el-cascader
        size="mini"
        v-model="cities"
        :options="citiesList"
        @change="handleChangeCities"
        :disabled="disabled"
      ></el-cascader>
    </div>
  </div>
</template>

<script>
import { queryProvinces, queryCities } from '@/api/user'
export default {
  name: 'CityList',
  data() {
    return { disabled: true, value: [], options: [], provinces: '', citiesList: [], cities: [] }
  },
  created() {
    this.getProvinces()
  },
  methods: {
    // 市
    async getCities(data) {
      const res = await queryCities({ province_name: data })
      this.citiesList = []
      res.data.data.forEach(item => {
        this.citiesList.push({ value: item, label: item })
      })
    },
    // 省
    async getProvinces() {
      const res = await queryProvinces()
      res.data.data.forEach(element => {
        this.options.push({ value: element, label: element })
      })
    },
    handleChange(value) {
      this.provinces = value
      this.disabled = false
      this.getCities(value[0])
    },
    handleChangeCities(cities) {
      this.$emit('updataname',cities[0])
    }
  }
}
</script>
<style lang="less" scoped>
.CityName {
  display: flex;
}
.block {
  width: 100px;
}
</style>
